<template>
  <!-- <el-row >
    <el-col :span="24"> -->
  <el-menu
    :uniqueOpened="true"
    :default-active="activeRoute"
    class="el-menu-vertical-demo"
    background-color="#545c64"
    :text-color="color.textColor"
    :active-text-color="color.activeTextColor"
  >
    <sidebar-item
      v-for="route in routesMap"
      :key="route.path"
      :route="route"
      :base-path="route.path"
      :active-route="activeRoute"
    />
  </el-menu>
  <!-- </el-col>
  </el-row> -->
</template>

<script lang="ts">
import { computed, defineComponent, markRaw, provide, reactive } from 'vue'
import SidebarItem from './SidebarItem.vue'
import { routes } from '@/router'
import { useRoute } from 'vue-router'

export default defineComponent({
  components: {
    SidebarItem
  },
  setup() {
    const routesMap = markRaw(routes)

    const route = useRoute()
    const activeRoute = computed(() => {
      let res = null
      const matched = route.matched
      let i = matched.length
      while (i--) {
        if (matched[i].meta?.icon) {
          res = matched[i]
          break
        }
      }
      return res?.path
    })

    const color = reactive({
      textColor: '#fff',
      activeTextColor: '#ffd04b'
    })

    provide('textColor', {
      active: color.activeTextColor,
      normal: color.textColor
    })

    provide('activeRoute', activeRoute)

    return { activeRoute, color, routesMap }
  }
})
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo {
  height: 100%;
}
</style>